<template>
	<view class="invite">
		<view class="title">
			<text>海报邀请</text>
			<view class="close" @click="close">
				<image src="@/static/images/close.png"></image>
			</view>
		</view>
		<view class="content">
			<view class="poster">
				<l-painter :board="poster" ref="painter" />
			</view>
			<!-- <view class="submit">
				<view @click="submit">立即邀请</view>
			</view> -->
			<view class="submit">
				<view @click="copy(props.link)">复制邀请链接</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const code_url = import.meta.env.VITE_H5_URL;
	import useBase from "@/hooks/useBase.js";
	const {
		copy,
		preview_image
	} = useBase();
	const props = defineProps({
		poster: String,
		link: String
	});
	const emit = defineEmits(["close"]);
	import {
		ref,
		shallowRef
	} from "vue";

	const poster = ref({});
	// console.log(props.invitation)
	// let share_poster = "http://img.fenghuankj.cn/20240105040026.png";
	let views = [{
		css: {
			width: "360rpx",
			height: "500rpx"
		},
		type: "image",
		src: props.poster,
		// src: share_poster
	}, {
		text: props.link,
		type: "qrcode",
		css: {
			width: "160rpx",
			height: "160rpx",
			color: "#000",
			background: "#FFFFFF",
			position: "absolute",
			left: "100rpx",
			bottom: "20rpx",
		}
	}]
	poster.value = {
		css: {
			width: '360rpx'
		},
		views
	};
	const painter = shallowRef();
	const submit = () => {
		painter.value.canvasToTempFilePathSync({
			fileType: "jpg",
			quality: 1,
			success: (res) => {
				let url = res.tempFilePath;
				preview_image(url)
			}
		})
	};
	const close = () => emit('close');
</script>

<style scoped lang="scss">
	.invite {
		width: 690rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		background: #FFFFFF;

		.title {
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			color: #222222;
			font-size: 36rpx;
			font-weight: bold;
			box-sizing: border-box;
			position: relative;

			.close {
				position: absolute;
				right: 25rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.content {
			width: 100%;
			// padding-bottom: var(--window-bottom);
			padding-bottom: 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.poster {
				width: 360rpx;
				height: 500rpx;
			}

			.submit {
				width: 100%;
				height: 180rpx;
				padding: 0 30rpx 15rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				view {
					width: 100%;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: bold;
					border-radius: 10rpx;
					background: #CA1C1D;
				}
			}
		}
	}
</style>